<script setup lang="ts">
import CardWrap from "./CardWrap.vue";
import {ref} from 'vue';
import AiTool from "./AiTool.vue";
import {getCookie} from "./utils";

const props = withDefaults(defineProps<{
  api?: string;
  params?: {
    [key: string]: any;
  };
  config?: {
    [key: string]: any;
  };
}>(), {
  api: 'https://china9.cn/api/app/aiToolRecommend',
  params: () => ({
    limit: 6
  }),
  config: () => ({
    headers: {
      'token': getCookie('token') || getCookie('access_token')
    }
  }),
});
const emits = defineEmits<{
  (e: 'toMore'): void;
}>();

const toAi = () => {
  emits('toMore');
};

const aiList = ref<any[]>([])
// 获取数据
const getAiToolsList = async () => {
  try {
    const response = await fetch(props.api, {
      method: 'POST',
      headers: props.config.headers,
      body: JSON.stringify(props.params)
    });
    const res = await response.json();
    if (response.ok && res.code === 200 && res.data) {
      aiList.value = res.data;
    } else {
      console.log('请求失败');
    }
  } catch (error) {
    console.log('请求出错', error);
  }
}
getAiToolsList();
</script>

<template>
  <card-wrap class="ai-wrap" title="AI工具" :show-more="true" @toMore="toAi">
    <div class="tools flex-align-stretch flex-wrap">
      <div v-for="item in aiList" :key="item.id" class="item-box">
        <ai-tool :item="item"/>
      </div>
    </div>
  </card-wrap>
</template>

<style scoped>
</style>
